import Sprite from './sprite';

/**
 * 精灵表动画类
 * 用于显示从单张精灵表中提取的帧动画
 */
export default class SpriteSheetAnimation extends Sprite {
  /**
   * 构造函数
   * @param {string} imgSrc - 精灵表图片路径
   * @param {number} frameWidth - 单帧宽度
   * @param {number} frameHeight - 单帧高度
   * @param {number} frameCount - 总帧数
   * @param {number} x - x坐标
   * @param {number} y - y坐标
   */
  constructor(imgSrc, frameWidth, frameHeight, frameCount, frameInterval = 1, x = 0, y = 0) {
    super(imgSrc, frameWidth, frameHeight, x, y);
    this.frameCount = frameCount;
    this.currentFrame = 0;
    this.frameInterval = frameInterval; // 每多少帧更新一次
    this.frameCounter = 0; // 帧计数器
    this.loop = true;
    this.isPlaying = true;
  }

  /**
   * 更新动画帧
   * 每次调用都会更新到下一帧
   */
  update() {
    if (!this.isPlaying) return;

    this.frameCounter++;

    // 达到指定帧数间隔才更新动画帧
    if (this.frameCounter >= this.frameInterval) {
      this.currentFrame++;
      this.frameCounter = 0; // 重置计数器

      // 检查是否超出帧数范围
      if (this.currentFrame >= this.frameCount) {
        if (this.loop) {
          this.currentFrame = 0;
        } else {
          this.currentFrame = this.frameCount - 1;
          this.isPlaying = false;
        }
      }
    }
  }

  /**
   * 绘制当前帧
   * @param {CanvasRenderingContext2D} ctx - 绘图上下文
   */
  render(ctx) {
    if (!this.visible) return;

    // 计算当前帧在精灵表中的x坐标
    const sx = this.currentFrame * this.width;
    const sy = 0; // 假设所有帧都在同一行

    // 绘制当前帧
    ctx.drawImage(
      this.img,
      sx, sy, // 源图像的起始坐标
      this.width, this.height, // 源图像的宽度和高度
      this.x, this.y, // 目标画布的起始坐标
      this.width, this.height // 目标画布的宽度和高度
    );
  }

  /**
   * 播放动画
   * @param {boolean} loop - 是否循环播放
   */
  play(loop = true) {
    this.loop = loop;
    this.isPlaying = true;
  }

  /**
   * 停止动画
   */
  stop() {
    this.isPlaying = false;
  }

  /**
   * 重置动画
   */
  reset() {
    this.currentFrame = 0;
  }
}